<template>
  <div class="home-container">
    <!-- <process-swiper :swpierLists="banner_list"></process-swiper> -->
    
    <div class="banner-wraper">
      <div style="width:1300px;height: ; margin:0 auto">
        <el-carousel :interval="5000" type="card" height="378px" width="900px">
          <el-carousel-item v-for="(item,index) in banner_list" :key="index">
            <img class="extend" :src="item.show_url" alt="" @click="jumpPage(item)">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="content">
      <div class="wraper">
        <header class="header flex-container">
          <div class="title flex-container">
            <div class="dot"></div>
            <div class="des">经典回顾</div>
            <div class="sub-des">Classic review</div>
          </div>
          <div class="more-handle">
            <div class="get-more" @click="getMore">更多》</div>
            <!-- <div class="right">
                        <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/icon5.png" alt="">
                    </div> -->
          </div>
        </header>
        <div class="viedo-swiper">
          <div class="img-swiper flex-container">
            <div
            class="item-wraper"
            v-for="(item, index) in jdhg_list"
            :key="index"
          >
          <!-- {{item}} -->
            <div class="img">
              <img
                class="extend"
                :src="item.show_url"
                alt=""
              />
              <div class="start" @click="startPlay(item)">
                <img
                  class="extend"
                  src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/icon7.png"
                  alt=""
                />
              </div>
            </div>
            <div class="title">{{item.title}}</div>
            <div class="des" :title="item.content_desc">
              {{item.content_desc}}
            </div>
          </div>
          </div>
          <div class="left icon" @click="toggleVedio(1)" v-if="false">
            <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/icon6.png" alt="" />
          </div>
          <div class="right icon" @click="toggleVedio(-1)" v-if="false">
            <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/icon5.png" alt="" />
          </div>
        </div>
        <header class="header flex-container top_distance">
          <div class="broad_time">
            <div class="title flex-container">
              <div class="dot"></div>
              <div class="des">播出信息</div>
              <div class="sub-des">Information</div>
            </div>
            <div class="des-c">中央新影发现之旅频道</div>
          <div class="des-c">播出时间: 每周三下午17:00-17:10</div>
          </div>
          <div class="title-wraper">
            <div class="title flex-container">
              <div class="dot"></div>
              <div class="des">播出平台</div>
              <div class="sub-des">Broadcasting platform</div>
            </div>
            <div class="advc">
              <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/logo3.png" alt="" />
            </div>
            <div class="des-c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全国地方电视台展播</div>
          </div>
        </header>
        <header class="header top_distance">
          <div class="title-wraper">
            <div class="title flex-container">
              <div class="dot"></div>
              <div class="des">联系方式</div>
              <div class="sub-des">Contact</div>
            </div>
            <div class="flex-container">
                <div class="contact-type phone">
                    全国监督服务电话：4009985862
                </div>
                <div class="contact-type vchat">
                    客服微信：weilaishiminglm
                </div>
            </div>
            <div class="contact-type exmail">
                官方邮箱：wlsm@mcshike.com
            </div>
          </div>
        </header>
        <header class="header flex-container top_distance">
          <div class="title-wraper">
            <div class="title flex-container">
              <div class="dot"></div>
              <div class="des">选题制作单位</div>
              <div class="sub-des">Cooperative unit</div>
            </div>
            <div class="contact-type exmail">
                北京卯辰时刻文化传媒有限公司<br>中视星皓（北京）文化传媒有限公司
            </div>
          </div>
          <div class="gzh flex-container">
              <div class="vchat-png">
                <img src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/公众号二维码1.png">
              </div>
              <div class="vetal-title">
                  官方公众号
              </div>
          </div>
        </header>
        <div class="ext_height"></div>
      </div>
    </div>
  </div>
</template>

<script>
import processSwiper from "@/components/processSwiper";
import getHomeLists from '@/service/home/index'
export default {
  name: "home",
  data() {
    return {
      banner_list:[
        {
          link_url: "",
          show_url: "",
          title: ""
        }
      ],
      jdhg_list:[
        {
          content_desc: "",
          mp4_url: "",
          show_url: "",
          title: ""
        }
      ]
    };
  },
  mounted(){
    this.init()
  },
  methods:{
    jumpPage(item){
      if(!!item.link_url){
        window.open(item.link_url)
      }
    },
    startPlay(item){
      // console.log(item,9999)
      window.open(item.mp4_url)
    },
    getMore(){
      this.$router.push('/historyLists')
    },
    toggleVedio(type){
      if(type === 1){
        let temp = this.jdhg_list[this.jdhg_list.length - 1];
        let tempLists = this.jdhg_list.slice(0, this.jdhg_list.length - 1);
        tempLists.unshift(temp);
        this.jdhg_list = tempLists;
        return
      }
       let temp = this.jdhg_list[0]
      this.jdhg_list.shift()
      this.jdhg_list.push(temp)
    },
    async init(){
      let res = await getHomeLists()
      if(res.errno == 0){
        this.jdhg_list = res.result.jdhg_list
        this.banner_list = res.result.banner_list
      }
    }
  },
  components: {
    processSwiper,
  },
};
</script>

<style scoped lang="less">
/deep/ .el-carousel__item--card.is-active{
  width: 900px;
  height: 378px;
  transform: translateX(210px) scale(1) !important;
}
/deep/ .el-carousel__indicators{
  display: none;
}

.banner-wraper{
  background: url("http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/banner-bg.png");
  box-sizing: border-box;
  position: relative;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

.img-swiper::-webkit-scrollbar { width: 0 !important }
.flex-container {
  display: flex;
  align-items: center;
}
.top_distance{
  margin-top: 40px;
  .broad_time{
    height: 250px;
  }
}
.ext_height{
  height: 40px;
}
.extend {
  width: 100%;
  height: 100%;
  display: block;
}
.content {
  width: 100%;
  background: url("http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/bg.png");
  background-size: 100% 100%;
  .wraper {
    width: 1200px;
    padding-top: 56px;
    margin: 0 auto;
    .header {
      .title-wraper {
        .contact-type{
            font-size: 20px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #FFFFFF;
            margin: 20px;
        }
      }
      .gzh{
          font-size: 30px;
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            color: #FFFFFF;
          .vchat-png{
              width: 180px;
              height: 180px;
              background: #FFFFFF;
              color: #000000;
          }
          .vetal-title{
              writing-mode: tb-rl;
          }
      }
      .advc {
        margin-top: 20px;
        width: 560px;
        height: 130px;
      }
      justify-content: space-between;
      .dot {
        width: 25px;
        height: 25px;
        background: #b8262c;
      }
      .des {
        font-size: 30px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #ffffff;
        margin: 0 12px;
      }
      .sub-des {
        font-size: 25px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #eaeaea;
      }
      .more-handle {
        font-size: 22px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #ffffff;
        .get-more{
          cursor: pointer;
        }
        .right {
          width: 36px;
          height: 24px;
        }
      }
      .des-c {
        max-width: 970px;
        font-size: 20px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #ffffff;
        line-height: 30px;
        padding: 20px 0;
      }
    }
    .viedo-swiper {
      .img-swiper{
        overflow: auto;
      }
      position: relative;
      .item-wraper {
        cursor: pointer;
        margin: 34px 10px;
        .img {
          width: 284px;
          height: 201px;
          // opacity: 0.4;
          border-radius: 8px;
          overflow: hidden;
          position: relative;
          .start {
            width: 62px;
            height: 62px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .title {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
          margin: 15px 0;
        }
        .des {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #c0c0c0;
          line-height: 22px;
          width: 274px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          // display: -webkit-box;
          // -webkit-line-clamp: 4;
          // -webkit-box-orient: vertical;
          cursor: pointer;
        }
      }
      .icon {
        cursor: pointer;
        width: 36px;
        height: 34px;
        position: absolute;
        top: 120px;
      }
      .left {
        left: -50px;
      }
      .right {
        right: -50px;
      }
    }
  }
}
</style>